<!-- 
    切换大小
    emit
    changeSize
 -->
<template>
    <div class="content">
        <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link">
                <i title="切换组件大小" class="iconfont icon-danhangwenben"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="CaretRight" command="large" :disabled="size == 'large'">{{
                            $t('sizechange.oversize')
                    }}</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command="default" :disabled="size == 'default'">{{
                            $t('sizechange.default')
                    }}</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command="small" :disabled="size == 'small'">{{
                            $t('sizechange.ultrasmall')
                    }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { CaretRight } from '@element-plus/icons-vue'//引入的图标
import { ElMessage } from "element-plus";

const size = ref('default')

size.value = localStorage.getItem('size') as string

const emit = defineEmits<{ (e: 'changeSize', size: string): void }>()//父传子size

const handleCommand = (e: string) => {
    size.value = e
    localStorage.setItem('size', e)
    emit('changeSize', e)
    ElMessage.success('设置成功')
}
</script>

<style lang="less" scoped>
.content {

    .el-dropdown {
        vertical-align: middle;
    }
}
</style>